<template>
	<view class="">
		<view class="chart-box" :style="{'background':`${bgColor}`}">
			<view class="chart-information">
				<view class="chart-name">
					{{data.indicName||''}}
				</view>
				<view class="measurement-time">
					<dev-button @tapDev="switchSubset(item.itemCode)"
						:bgColor="item.itemCode==childDeviceType?'#2EA7E0':'#E2E1E2'"
						:color="item.itemCode==childDeviceType?'#fff':'#9B9B9B'" elementType="inline"
						style="margin-left: 14rpx;margin-bottom: 10rpx;" v-for="(item,index) in data.child"
						:key="item.itemCode">
						{{item.indicName}}
					</dev-button>
				</view>
			</view>
			<view class="charts-box-f2" @touchmove="move" @touchend="touchend" @touchstart="start($event)">
				<l-f2 ref="chart"></l-f2>
			</view>
		</view>

	</view>
</template>

<!-- <script src="https://gw.alipayobjects.com/os/lib/antv/f2/3.7.0/dist/f2-all.min.js"></script> -->
<script>
	import dayjs from '@/common/utils/day/day.js'
	import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
	import lF2 from '@/uni_modules/lime-f2/components/l-f2/l-f2.vue';
	export default {
		name: 'blood-pressure', //健康卡片
		components: {
			lF2
		},
		props: {
			bgColor: {
				type: String,
				default: '#fff'
			},
			data: {
				type: Object,
				default: () => {}
			},
			mode: {
				type: String,
				default: 'D'
			},
			beginTime: {
				type: String,
				default: dayjs().format('YYYY-MM-DD')
			}
		},
		watch: {
			data(newValue, oldValue) {
				this.indicatorData = newValue;
				this.chartTrend(this.beginTime);
			},
			mode(newValue, oldValue) {
				this.chartTrend(this.beginTime);
			},
			beginTime(newValue, oldValue) {
				console.log('时间变更')
				this.chartTrend(this.beginTime);
			},
		},
		data() {
			return {
				indicatorData: this.data,
				leftData: [],
				listData: [],
				rightData: [],
				startData: {
					clientX: '',
					clientY: '',
				},
                userHealthDataStandardVOS: [],//指标数据的标准值
				moveX: 0, //x轴移动距离
				moveY: 0, //y轴移动距离
				touch: {},
				isLeft: false, //是否打开删除
				login: false,
				pixelRatio: 0, //像素比
				allWidth: 650, //整体宽度 rpx
				itemWidth: 0, //每个多宽 px
				itemNum: 7, //一个界面显示多少个
				calculation: 0, //
				redraw: false, //
				chart: '',
				lastTime: '', //上一个时间
				currentTtime: this.time, //当前时间
				nextTime: '', //下一个时间
				send: false, //是否在滑动锁死时间内


				startWeek: '', //开始周
				endWeek: '', //结束周

				startMonth: '', //开始月
				endMonth: '', //结束月
				numberOfLines: 1, //线条数

				childDeviceType: '', //子集指标id
			};
		},
		mounted() {
			this.chartsWirte(); //绘制图表
			this.getPhoneData(); //获取手机数据
			this.chartTrend(this.currentTtime);
		},



		methods: {
			//切换子项
			switchSubset(val) {
                console.info(val,"val---》")
                console.info(this.currentTtime,"this.this.currentTtime》")
				if (val !== this.childDeviceType) {
					this.childDeviceType = val;
					this.chartTrend(this.currentTtime)
				}
			},

			//获取数据
			chartTrend(time, type) {
				this.numberOfLines = 1;
				//如果当前为血压的话是两条线
				if (this.data.itemCode == 'BLOOD_PRESSURE') {
					this.numberOfLines = 2;
				}
				console.log(time, this.data, '传入时间')

				let _this = this;
				this.currentTtime = time;
				let list = [];
				let parameter = {}
				//console.log(this.nextTime, this.lastTime)
				if (this.mode == 'D') {
					this.nextTime = dayjs(time).add(1, 'day').format('YYYY-MM-DD');
					this.lastTime = dayjs(time).subtract(1, 'day').format('YYYY-MM-DD');
					parameter = {
						cycle: this.mode,
						startTime: time,
						indicId: this.indicatorData.indicId
					}
					this.$emit('change', {
						mode: 'D',
						time: dayjs(time).format('YYYY.MM.DD')
					})
				}
				if (this.mode == 'W') {
					this.nextTime = dayjs(time).add(1, 'week').format('YYYY-MM-DD');
					this.lastTime = dayjs(time).subtract(1, 'week').format('YYYY-MM-DD');

					console.log(this.nextTime, this.lastTime, '时间咋个计算的')

					this.startWeek = dayjs(time).startOf('week').add(1, 'day').format('YYYY-MM-DD');
					this.endWeek = dayjs(time).endOf('week').add(1, 'day').format('YYYY-MM-DD');
					parameter = {
						cycle: this.mode,
						startTime: this.startWeek,
						endTime: this.endWeek,
						indicId: this.indicatorData.indicId
					}
					this.$emit('change', {
						mode: 'W',
						time: `${dayjs(this.startWeek).format('YYYY.MM.DD')}-${dayjs(this.endWeek).format('YYYY.MM.DD')}`
					})
				}
				if (this.mode == 'M') {
					if (type == 'add') {
						if (this.isLeft) {
							this.startMonth = dayjs(this.nextTime).startOf('month').format('YYYY-MM-DD');
							this.endMonth = dayjs(this.nextTime).endOf('month').format('YYYY-MM-DD');
						} else {
							this.startMonth = dayjs(this.lastTime).startOf('month').format('YYYY-MM-DD');
							this.endMonth = dayjs(this.lastTime).endOf('month').format('YYYY-MM-DD');
						}
					} else {
						this.startMonth = dayjs(time).startOf('month').format('YYYY-MM-DD');
						this.endMonth = dayjs(time).endOf('month').format('YYYY-MM-DD');
						this.nextTime = dayjs(this.startMonth).add(1, 'month').format('YYYY-MM-DD');
						this.lastTime = dayjs(this.startMonth).subtract(1, 'month').format('YYYY-MM-DD');

						console.log(this.nextTime, this.lastTime, '下一月--上一月')

					}
					parameter = {
						cycle: this.mode,
						startTime: this.startMonth,
						endTime: this.endMonth,
						indicId: this.indicatorData.indicId
					}
				}
				if (this.data.child.length > 0) {
					if (this.childDeviceType) {
						parameter['childDeviceType'] = this.childDeviceType;
					} else {
						this.childDeviceType = parameter['childDeviceType'] = this.data.child[0].itemCode;
					}
				}
				//如果当前是血糖的话
				if (this.data.itemCode == 'BLOOD_SUGAR') {
					if (this.childDeviceType == 'BEFORE_MEAL' || this.childDeviceType == 'AFTER_MEAL') {
						this.numberOfLines = 3;
					} else {
						this.numberOfLines = 1;
					}
				}
				this.$https.get(global.apiUrls.chartTrend, parameter).then(res => {
					if (res.data.code == 1000) {
						let cacheData = res.data.result.healthDataValueVOS;    
                        this.userHealthDataStandardVOS = res.data.result.userHealthDataStandardVOS;
						if(this.userHealthDataStandardVOS && this.userHealthDataStandardVOS.length!=0){
                            this.userHealthDataStandardVOS.forEach(healthData => {
                                if(healthData.itemCode==this.childDeviceType){
                                    this.userHealthDataStandardVOS = [];
                                    this.userHealthDataStandardVOS.push(healthData);
                                }
                            })
                        }
                        if(cacheData){
                            cacheData.forEach((item, index) => {
                            	let xAxis = '';
                            	if (this.mode == 'D') {
                            		xAxis = dayjs(item.createTime).format('HH:mm');
                            	}
                            	if (this.mode == 'W') {
                            		xAxis = _this.calculationWeek(dayjs(item.recordTime).get('day'));
                            	}
                            	if (this.mode == 'M') {
                            		xAxis = dayjs(item.recordTime).format('M.D');
                                
                            	}
                                if(res.data.result.itemCode == 'SLEEP'){
                                    if(item.firstValue){
                                          item.firstValue = item.firstValue*1/60;
                                    }
                                }
                               if(item.firstValue){
                                    list.push({
                                        xId: xAxis,
                                        type: item.indicName,
                                        value: item.firstValue ? item.firstValue : '',
                                        recordTime: item.recordTime,
                                        healthDataStandard:this.userHealthDataStandardVOS
                                    })
                               }
                            	if (this.numberOfLines > 1) {
                                     if(item.secondValue){
                                         list.push({
                                         	xId: xAxis,
                                         	type: item.secondIndicName,
                                         	value: item.secondValue ? item.secondValue : '',
                                         	recordTime: item.recordTime,
                                             healthDataStandard:this.userHealthDataStandardVOS
                                         })
                                     }
                            		
                            	}
                            	if (this.numberOfLines > 2) {
                                    if(item.thirdValue){
                                        list.push({
                                        	xId: xAxis,
                                        	type: item.thirdIndicName,
                                        	value: item.thirdValue ? item.thirdValue : '',
                                        	recordTime: item.recordTime,
                                            healthDataStandard:this.userHealthDataStandardVOS
                                        })
                                    }
                            		
                            	}
                            
                            
                            })  
                        }         
                     if(list.length==0){
                            list.push({
                                xId: '测量日期',
                                type: '暂无数据',
                                value: '暂无数据',
                                recordTime: `${dayjs(this.startMonth).format('YYYY.MM.DD')}-${dayjs(this.endMonth).format('YYYY.MM.DD')}`
                            })
                        }else{
                            if(list.length>1){
                                list.filter(item=>{
                                   return item.type!='暂无数据'
                                })
                            }
                        }
                    
						if (this.mode == 'D' || this.mode == 'W') {
							//this.$refs.chart.changeData(list)
							this.listData = list;
                            this.resetChart();
						} else {
							if (type == 'add') {
								if (this.isLeft) {
									this.rightData = [...this.rightData, ...list]
									this.nextTime = dayjs(this.nextTime).add(1, 'month').format('YYYY-MM-DD');
									this.send = false;
									console.log(this.rightData, '右侧数据新加载')
								} else {
									this.leftData = [...this.leftData, ...list.reverse()]
									this.lastTime = dayjs(this.lastTime).subtract(1, 'month').format('YYYY-MM-DD');
									this.send = false;
									console.log(this.leftData, '没数据吗')
								}
							} else {
								this.leftData = [];
								this.listData = list.splice(0, this.numberOfLines * 7);
								this.rightData = list;
                                console.info(this.listData,"this.listData999")
                                console.info(this.rightData,"this.rightData999")
                                if(this.listData.length>1){
                                    this.listData = this.listData.filter(item => {
                                              return item.type!='暂无数据'
                                    }) 
                                }
								//this.$refs.chart.changeData(this.listData);
                                this.resetChart();
								if (this.listData.length > 1) {
									this.$emit('change', {
										mode: 'M',
										time: `${this.leftData.length>0?dayjs(this.leftData[0].recordTime).format('YYYY.MM.DD'):dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${this.rightData.length>0?dayjs(this.rightData[this.rightData.length-1].recordTime).format('YYYY.MM.DD'):dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
										// time: `${dayjs(this.lastTime).format('YYYY.MM.DD')}-${dayjs(this.nextTime).format('YYYY.MM.DD')}`
										// time: `${dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
									})
								} else {
									this.$emit('change', {
										mode: 'M',
										time: `${dayjs(this.startMonth).format('YYYY.MM.DD')}-${dayjs(this.endMonth).format('YYYY.MM.DD')}`
										// time: `${dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
									})
								}

							}

						}
                        
                        // this.$refs.chart.guide().rect({
                        //     start: ['min',this.userHealthDataStandardVOS[0].min],
                        //     end: ['max', this.userHealthDataStandardVOS[0].max],
                        //     style: {
                        //         fill: '#000',
                        //         fillOpacity: 0.05
                        //     }
                        // });
                        // if(this.data.itemCode=='BLOOD_PRESSURE'){
                        //     this.$refs.chart.guide().rect({
                        //     	start: ['min', this.userHealthDataStandardVOS[1].min],
                        //     	end: ['max', this.userHealthDataStandardVOS[1].max],
                        //     	style: {
                        //     		fill: '#000',
                        //     		fillOpacity: 0.03
                        //     	}
                        //     });
                        // }

					}
				})
			},

			//获取当前是周几
			calculationWeek(val) {
				let day = ''
				switch (val) {
					case 0:
						day = "星期天";
						break;
					case 1:
						day = "星期一";
						break;
					case 2:
						day = "星期二";
						break;
					case 3:
						day = "星期三";
						break;
					case 4:
						day = "星期四";
						break;
					case 5:
						day = "星期五";
						break;
					case 6:
						day = "星期六";
				}
				return day
			},

            //重置图表
            resetChart(){
             console.info("重置图表---->", this.listData);
              this.$refs.chart.reset(chart => {
              	chart.clear() // 清理所有
              	chart.source(this.listData, {
              		xId: {
              			tickCount: 7,
              		},
                    value: {
                        min:0
                    }
              	});
              	chart.legend('type', {
              	  position: 'bottom'
              	});
                chart.line().position('xId*value').color('type').shape('smooth');
                chart.point().position('xId*value').color('type').style({
                        lineWidth: 1,
                        stroke: '#fff'
                });
              this.standardInterval(chart);
              	chart.render();
              	return chart;
              });  
            },
            //绘制标准区间
            standardInterval(chart){
                if(this.userHealthDataStandardVOS && this.userHealthDataStandardVOS.length!=0){    
                    chart.guide().rect({
                        start: ['min',this.userHealthDataStandardVOS[0].min],
                        end: ['max', this.userHealthDataStandardVOS[0].max],
                        style: {
                            fill: '#000',
                            fillOpacity: 0.05
                        }
                    });
                    if(this.data.itemCode=='BLOOD_PRESSURE'){
                        chart.guide().rect({
                        	start: ['min', this.userHealthDataStandardVOS[1].min],
                        	end: ['max', this.userHealthDataStandardVOS[1].max],
                        	style: {
                        		fill: '#000',
                        		fillOpacity: 0.03
                        	}
                        });
                    }
                }
            },
			//绘制图片
			chartsWirte() {
				this.$refs.chart.init(config => {
					const chart = new F2.Chart(config);
					chart.source(this.listData, {
						xId: {
							tickCount: 7,
						},
                        value: {
                           min:0
                        }
					});
					// chart.legend(false);
                      //if(this.listData.type){
                  chart.legend('type', {
                    position: 'bottom'
                  });
                    //  }
					// chart.line().position('xId*value').color('type',[this.allData.backgroundOne,this.allData.backgroundTwo]).shape('smooth');
                   console.info(this.listData.value,"this.listData.value")
                   if(this.listData.value){
                       chart.line().position('xId*value').color('type').shape('smooth');
                       chart.point().position('xId*value').color('type').style({
                           	lineWidth: 1,
                           	stroke: '#fff'
                       });
                     this.standardInterval(chart);
                     chart.render();
                   }
					// chart.interaction('pan');
					//chart.point('hollowCircle')
					
					return chart;
				});
			},

			//获取手机数据
			getPhoneData() {
				let _this = this;
				uni.getSystemInfo({
					success: function(res) {
						_this.pixelRatio = 750 / res.windowWidth;
						// console.log(650/_this.pixelRatio,'大概多少？？？？')
						//计算滑动多远加载一个
						_this.itemWidth = (_this.allWidth / _this.pixelRatio / _this.itemNum);
						console.log(_this.itemWidth, '加载距离')
					}
				});
			},

			//移动结束请求接口
			touchend() {

				if (Math.abs(this.startData.clientX - this.touch.clientX) < 50) {
					return
				} else {
					if (this.mode == 'D' || this.mode == 'W') {
						this.pageTurning(); //翻页				
					}
				}
			},
			//翻页
			pageTurning(direction) {
				if (direction) {
					if (direction == '1') {
						this.isLeft = true;
					} else {
						this.isLeft = false;
					}
				}
				if (this.isLeft) {
					if (dayjs().isAfter(dayjs(this.nextTime))) {
						this.chartTrend(this.nextTime);
					}
				} else {
					if (dayjs(this.lastTime).isAfter(dayjs('2021-01-01'))) {
						this.chartTrend(this.lastTime);
					}
				}
			},
			//月份翻页
			// monthFlipping(direction) {
			// 	console.log(this.listData, '有数据吗')

			// 	if (direction == '1') {
			// 		// let times = this.listData.length>0? dayjs(this.listData[0].recordTime).add(1,'month').format('YYYY-MM-DD') :dayjs().format('YYYY-MM-DD');
			// 		// if (dayjs().isAfter(dayjs(times))) {
			// 		this.chartTrend(this.nextTime);
			// 		// }
			// 	} else {
			// 		// let times = this.listData.length>0? dayjs(this.listData[0].recordTime).subtract(1,'month').format('YYYY-MM-DD') :dayjs().format('YYYY-MM-DD');

			// 		if (dayjs(this.lastTime).isAfter(dayjs('2021-01-01'))) {
			// 			this.chartTrend(this.lastTime);
			// 		}
			// 	}
			// },

			//日期按周翻页
			dateFlipping(direction) {
				if (direction) {
					if (direction == '1') {
						this.isLeft = true;
					} else {
						this.isLeft = false;
					}
				}
				this.nextTime = dayjs(this.currentTtime).add(1, 'week').format('YYYY-MM-DD');
				this.lastTime = dayjs(this.currentTtime).subtract(1, 'week').format('YYYY-MM-DD');
				if (this.isLeft) {
					if (dayjs().isAfter(dayjs(this.nextTime))) {
						this.chartTrend(this.nextTime);
					}
				} else {
					if (dayjs(this.lastTime).isAfter(dayjs('2021-01-01'))) {
						this.chartTrend(this.lastTime);
					}
				}
			},


			start(e, index) { //@touchstart 触摸开始
				this.transition = '.1s';
				this.startData.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标
				this.touch['clientX'] = e.changedTouches[0].clientX;
			},
			move(event) { //@touchmove触摸移动
				let _this = this;
				let touch = event.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
				this.touch = touch;
				let data = touch.clientX - this.startData.clientX;
				if (touch.clientX < this.startData.clientX) { //向左移动
					this.isLeft = true;
					if (this.mode == 'D' || this.mode == 'W') return
					if (data < `-${this.itemWidth}`) {
						this.startData.clientX = touch.clientX;
						if (this.rightData.length < this.numberOfLines) {
                            console.info(this.nextTime,"this.nextTime->")
							if (!this.send && dayjs().isAfter(dayjs(this.nextTime))) {
								this.send = true;
								this.chartTrend(this.nextTime, 'add');
							}
							return;
						}
                       
						if (this.listData.length >= this.numberOfLines * 7) {
							this.leftData = [...this.listData.splice(0, this.numberOfLines), ...this.leftData]
						}
						this.listData = [...this.listData, ...this.rightData.splice(0, this.numberOfLines)]
                        if(this.listData.length>1){
                            this.listData = this.listData.filter(item => {
                                      return item.type!='暂无数据'
                            }) 
                        }
                        //this.$refs.chart.changeData(this.listData)
                         this.resetChart();
                        if (this.listData.length > 1) {
                        	this.$emit('change', {
                        		mode: 'M',
                        		time: `${this.leftData.length>0?dayjs(this.leftData[0].recordTime).format('YYYY.MM.DD'):dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${this.rightData.length>0?dayjs(this.rightData[this.rightData.length-1].recordTime).format('YYYY.MM.DD'):dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
                        		// time: `${dayjs(this.lastTime).format('YYYY.MM.DD')}-${dayjs(this.nextTime).format('YYYY.MM.DD')}`
                        		// time: `${dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
                        	})
                        } else {
                        	this.$emit('change', {
                        		mode: 'M',
                        		time: `${dayjs(this.startMonth).format('YYYY.MM.DD')}-${dayjs(this.endMonth).format('YYYY.MM.DD')}`
                        		// time: `${dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
                        	})
                        }
						// this.$emit('change', {
						// 	mode: 'M',
						// 	time: `${this.leftData.length>0?dayjs(this.leftData[0].recordTime).format('YYYY.MM.DD'):dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${this.rightData.length>0?dayjs(this.rightData[this.rightData.length-1].recordTime).format('YYYY.MM.DD'):dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
						// 	// time: `${dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
						// 	// time: `${dayjs(this.lastTime).format('YYYY.MM.DD')}-${dayjs(this.nextTime).format('YYYY.MM.DD')}`
						// })
					}
				}
				if (touch.clientX > this.startData.clientX) { //向右移动
					this.isLeft = false;
					if (this.mode == 'D' || this.mode == 'W') return
					if (data > this.itemWidth) {
						this.startData.clientX = touch.clientX;
						//如果当前右侧盒子值小于当前切割值
						if (this.leftData.length < this.numberOfLines) {
							if (!this.send && dayjs(this.lastTime).isAfter(dayjs('2021-01-01'))) {
								this.send = true;
								this.chartTrend(this.lastTime, 'add');
							}
							return;
						}
						if (this.listData.length >= this.numberOfLines * 7) {
							this.rightData = [...this.listData.splice(this.listData.length - this.numberOfLines, this
								.numberOfLines), ...this.rightData];
						}
                          console.info(this.listData,"this.listData之前")
                         console.info( this.leftData,"console.infoleftData")
                         this.leftData = this.leftData.filter(item => {
                                   return item.type!='暂无数据'
                         }) 
						this.listData = [...this.leftData.splice(0, this.numberOfLines), ...this.listData]
                          console.info(this.listData,"this.listData之后")
                        if(this.listData.length>1){
                            this.listData = this.listData.filter(item => {
                                      return item.type!='暂无数据'
                            }) 
                        }
						//this.$refs.chart.changeData(this.listData);
                         this.resetChart();
                        if (this.listData.length > 1) {
                        	this.$emit('change', {
                        		mode: 'M',
                        		time: `${this.leftData.length>0?dayjs(this.leftData[0].recordTime).format('YYYY.MM.DD'):dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${this.rightData.length>0?dayjs(this.rightData[this.rightData.length-1].recordTime).format('YYYY.MM.DD'):dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
                        		// time: `${dayjs(this.lastTime).format('YYYY.MM.DD')}-${dayjs(this.nextTime).format('YYYY.MM.DD')}`
                        		// time: `${dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
                        	})
                        } else {
                            console.info(`${dayjs(this.startMonth).format('YYYY.MM.DD')}-${dayjs(this.endMonth).format('YYYY.MM.DD')}`,"time--->")
                        	this.$emit('change', {
                        		mode: 'M',
                        		time: `${dayjs(this.startMonth).format('YYYY.MM.DD')}-${dayjs(this.endMonth).format('YYYY.MM.DD')}`
                        		// time: `${dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
                        	})
                        }
						// this.$emit('change', {
						// 	mode: 'M',
						// 	time: `${this.leftData.length>0?dayjs(this.leftData[0].recordTime).format('YYYY.MM.DD'):dayjs(this.listData[0].recordTime).format('YYYY.MM.DD')}-${this.rightData.length>0?dayjs(this.rightData[this.rightData.length-1].recordTime).format('YYYY.MM.DD'):dayjs(this.listData[this.listData.length-1].recordTime).format('YYYY.MM.DD')}`
						// 	// time: `${dayjs(this.lastTime).format('YYYY.MM.DD')}-${dayjs(this.nextTime).format('YYYY.MM.DD')}`
						// })
					}
				}
			},
		}


	}
</script>

<style lang="scss">
	.chart-box {
		margin-left: 17rpx;
		min-height: 500rpx;
		width: 716rpx;
		// background: linear-gradient(180deg, #FDF8F1 0%, #FCEACB 100%);
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(173, 173, 173, 0.25);
		// background: #ffffff;
		border-radius: 20rpx;
		position: relative;
		margin-top: 36rpx;

		.chart-information {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 22rpx 30rpx;

			.chart-name {
				font-size: 32rpx;
				font-weight: 800;
				color: #000000;
			}

			.measurement-time {
				font-size: 22rpx;
				font-weight: 500;
				color: #9B9B9B;

				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}
		}

		.charts-box-f2 {
			width: 650rpx;
			height: 340rpx;
			// background-color: aqua;
			margin-left: 34rpx;
		}

	}
</style>
